<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!--[if lt IE 9]>
<script type="text/javascript" src="/admin/lib/html5shiv.js"></script>
<script type="text/javascript" src="/admin/lib/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="/admin/lib/laypage/1.2/skin/laypage.css" />
<link rel="stylesheet" type="text/css" href="/admin/static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="/admin/static/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css" href="/admin/lib/Hui-iconfont/1.0.8/iconfont.css" />
<link rel="stylesheet" type="text/css" href="/admin/static/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css" href="/admin/static/h-ui.admin/css/style.css" />

<script type="text/javascript" src="/admin/lib/vue/vue.min.js"></script>
<script type="text/javascript" src="/admin/lib/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="/admin/lib/layer/2.4/layer.js" charset="utf-8"></script>
<script type="text/javascript" src="/admin/static/h-ui/js/H-ui.min.js"></script> 
<script type="text/javascript" src="/admin/static/h-ui.admin/js/H-ui.admin.js"></script>

<!--[if IE 6]>
<script type="text/javascript" src="/admin/lib/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix('*');</script>
<![endif]-->
<title>考勤管理</title>
</head>
<body>
	<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 考勤管理<span class="c-gray en">&gt;</span> 考勤列表<a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a></nav>
<div class="page-container">
	
	<div class="text-c">
	 请休假时间：
		<input type="text" readonly="readonly"  onfocus="WdatePicker({} )"  name="checkday" id="checkday" class="input-text Wdate" style="width:120px;">
		<input type="text" class="input-text" style="width:450px" placeholder="输入姓名、类别的关键字" name="checkTitle" id="checktitle">
		<button type="button" class="btn btn-success radius" id="selectByDynamic" name="selectByDynamic"><i class="Hui-iconfont">&#xe665;</i> 搜考勤</button>
	</div>
	
	<div class="cl pd-5 bg-1 bk-gray mt-20"> <span class="l"></span><span class="r">共有数据：<strong id="totalnum"></strong> 条</span> </div>
	<div id="app" class="mt-20">
	<table class="table table-border table-bordered table-hover table-bg table-sort">
		<thead>
			<tr class="text-c">
				<th width="80">ID</th>
				<th width="120">申请人</th>
				<th width="120">申请类别</th>
				<th width="200">申请日期</th>
				<th width="200">起始时间</th>
				<th width="200">结束时间</th>
				<th width="">时长</th>
				<th width="120">批复状态</th>
				<th width="200">审批</th>
			</tr>
		</thead>
		<tbody>
			<tr class="text-c" v-for="(o,index) in result">
				<td>{{index+1}}</td>
				<td><span style="cursor:pointer" class="text-primary">{{o.oaUser.userUsername}}</span>
				<input type="text" style="display:none;">{{o.oaUser.userId}}</input></td>
				<td>{{o.oaChecktypes.checktypesName}}</td>
				<td>{{o.checkTime | time}}</td>
				<td>{{o.checkBegin | timestamp}}</td>
				<td>{{o.checkEnd | timestamp}}</td>
				<td>{{o.checkDate}}</td>
				<td class="td-status"><span class="label-radius">{{o.oaSubmit.submitState}}</span></td>
				<td class="td-manage"> <a title="审批" href="javascript:;" @click="checkreply(o.checkId,o.oaSubmit.submitState)" class="ml-5" style="text-decoration:none"><i class="Hui-iconfont">&#xe692;</i></a></td>
			</tr>
			<tr>
				<td colspan="10" align="right"><div id="pagenav"></div></td>
			</tr>
		</tbody>
	</table>
	</div>
</div>





<!--_footer 作为公共模版分离出去-->

<!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<!--日历插件-->
<script type="text/javascript" src="/admin/lib/My97DatePicker/4.8/WdatePicker.js"></script> 
<!--从单前数据检索
<script type="text/javascript" src="/admin/lib/datatables/1.10.0/jquery.dataTables.min.js"></script> -->
<!--分页插件-->
<script type="text/javascript" src="/admin/lib/laypage/1.2/laypage.js" charset="utf-8"></script>
<script type="text/javascript">
		
		
				var app = new Vue({
					el : '#app',
					data : {
						result : []
					}
				});
				//查询全部用户数据
				var getUserPageList = function(curr) {
					$.ajax({ 
						type : "GET",
						dataType : "json",
						url : "/getPageByDynamic",
						data : {
							pageNum:curr || 1,
							pageSize:10,
							checkTitle:$("#checktitle").val(),
							checkday:$("#checkday").val()
						},
						
						success : function(msg) {
							app.result=msg.page;
							laypage({
							  cont: 'pagenav', //容器。值支持id名、原生dom对象，jquery对象,
							  totol: msg.total,//总条数
							  pages: msg.pages, //总页数
							  skip: true, //是否开启跳页
							  skin: '#AF0000',
							  groups: 3,//连续显示分页数
							  curr : curr || 1, //当前页
							  jump: function(obj, first){ //触发分页后的回调
							  	$('#totalnum').html(obj.totol);	//赋值条数
        				  	  if(!first){ //点击跳页触发函数自身，并传递当前页：obj.curr
 						         getUserPageList(obj.curr);
						        }
						      }							  
							});
						},
					});
				}
			getUserPageList();//渲染分页	
		$(function(){	
					//点击搜索动态查询显示分页
		$('#selectByDynamic').on('click', function() {
				getUserPageList();
		});	
		});
		
	$(function(){
		$("#checkday").blur(function(){
			var bday=$('input[name="checkday"]').val();
	        $("#checkend").attr("value",bday);//将时间赋值给了隐藏域
			return;
		})
	});

		
		
		
		/*vue.js filter实现将时间戳转换为自定义(年月日)标准时间格式*/
		Vue.filter('time', function (value) {
         var date = new Date(value);
        Y = date.getFullYear(),
        m = date.getMonth() + 1,
        d = date.getDate(),
        H = date.getHours(),
        i = date.getMinutes(),
        s = date.getSeconds();
        if (m < 10) {
            m = '0' + m;
        }
        if (d < 10) {
            d = '0' + d;
        }
        if (H < 10) {
            H = '0' + H;
        }
        if (i < 10) {
            i = '0' + i;
        }
        if (s < 10) {
            s = '0' + s;
        }
        <!-- 获取时间格式 2017-01-03 10:13:48 -->
        // var t = Y+'-'+m+'-'+d+' '+H+':'+i+':'+s;
        <!-- 获取时间格式 2017-01-03 -->
        var t = Y + '-' + m + '-' + d;
        return t;
   		})
   		
   		/*vue.js filter实现将时间戳转换为自定义(年月日时分秒)标准时间格式*/
		Vue.filter('timestamp', function (value) {
         var date = new Date(value);
        Y = date.getFullYear(),
        m = date.getMonth() + 1,
        d = date.getDate(),
        H = date.getHours(),
        i = date.getMinutes(),
        s = date.getSeconds();
        if (m < 10) {
            m = '0' + m;
        }
        if (d < 10) {
            d = '0' + d;
        }
        if (H < 10) {
            H = '0' + H;
        }
        if (i < 10) {
            i = '0' + i;
        }
        if (s < 10) {
            s = '0' + s;
        }
        <!-- 获取时间格式 2017-01-03 10:13:48 -->
        var timestamp = Y+'-'+m+'-'+d+' '+H+':'+i+':'+s;
        <!-- 获取时间格式 2017-01-03 -->
        //var t = Y + '-' + m + '-' + d;
        return timestamp;
   		})
		
		/*考勤-启用*/
		function member_start(obj,id){
				$.ajax({
					type: 'POST',
					url: '',
					dataType: 'json',
					success: function(data){
						$(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" onClick="member_stop(this,id)" href="javascript:;" title="查看"><i class="Hui-iconfont">&#xe631;</i></a>');
						$(obj).parents("tr").find(".td-status").html('<span class="label label-success radius">已启用</span>');
						$(obj).remove();
						layer.msg('已启用!',{icon: 6,time:1000});
					},
					error:function(data) {
						console.log(data.msg);
					},
			});
		}
		/*考勤-审批*/
		var checkreply = function(id,submitState) {
			if(submitState=="申请中"){
				layer.open({
					type : 2,
					title : '审批考勤',
					fix : false,
					maxmin : true,
					shadeClose : true,
					area : [ '1100px', '600px' ],
					content : '/checkreplyshow?checkId='+id,
					end : function() {
						getUserPageList();
					}
				});
			}else{
				layer.msg('不能重复审批',{icon:5});
			}
			
		}

</script> 
</body>
</html>
